<template>
  <div class="container" v-cloak>
    <div class="container_page">
      <page-header :title="$t('order_orderDetail')"></page-header>
      <template v-if="info">
        <div class="box page_body">
          <div class="pay_type">
            <div class="order_status">
              <div class="dot" :class="[orderStatusMap[info.state]]"></div>
              <div class="status">
                {{ $t(orderStatusMap[info.state]) }}
              </div>
            </div>
            <div class="brief">{{ info.orderNo }}</div>
            <div class="brief" v-if="info.useDuration">
              {{ $t('home_duration') }}: {{ getDuration(info.useDuration * 1000) }}
            </div>
            <div class="brief" v-else>
              {{ $t('home_duration') }}:
              {{ getDuration(Date.now() - info.createTime) }}
            </div>
          </div>
          <div class="divider"></div>
          <div class="detail_card">
            <div class="title">{{ $t('order_paymentDetail') }}</div>
            <div class="list_box info_list">
              <div class="item">
                <div class="key">{{ $t('order_orderAmount') }}</div>
                <div class="value">
                  {{ info.orderAmount | amountFormats($currencyVal.symbol) }}
                </div>
              </div>
              <div class="item" v-if="info.taxAmount > 0">
                <div class="key">{{ $t('order_tax') + info.tax + '%' }}</div>
                <div class="value">
                  {{ info.taxAmount | amountFormats($currencyVal.symbol) }}
                </div>
              </div>
              <div class="item" v-if="info.state == 2">
                <div class="key">
                  {{
                    info.taxAmount > 0
                      ? $t('order_unpay_include_tax')
                      : $t('order_amount2bePaid')
                  }}
                </div>
                <div class="value payment">
                  {{ info.money | amountFormats($currencyVal.symbol) }}
                </div>
              </div>

              <div
                class="item"
                v-if="[2, 3].includes(info.state) && info.plateCouponAmount > 0"
              >
                <div class="key">
                  <img
                    :src="require('@/assets/img/order/ic_coupon@2x.png')"
                    alt=""
                  />
                  <span class="label">{{ $t('order_discount') }}</span>
                </div>
                <div class="value">
                  {{
                    info.plateCouponAmount | amountFormats($currencyVal.symbol)
                  }}
                </div>
              </div>
              <div
                class="item"
                v-if="[3].includes(info.state) && info.refundAmount > 0"
              >
                <div class="key">{{ $t('pay_refundAmount') }}</div>
                <div class="value">
                  {{ info.refundAmount | amountFormats($currencyVal.symbol) }}
                </div>
              </div>
              <div class="item" v-if="[3].includes(info.state)">
                <div class="key">
                  {{
                    info.taxAmount > 0
                      ? $t('order_pay_include_tax')
                      : $t('order_paymentAmount')
                  }}
                </div>
                <div class="value payment">
                  {{ info.realAmount | amountFormats($currencyVal.symbol) }}
                </div>
              </div>
            </div>
          </div>
          <!-- order details -->
          <div class="detail_card">
            <div class="title">{{ $t('order_orderDetails') }}</div>
            <div class="list_box order">
              <div class="item">
                <div class="order_row">
                  <div class="key">{{ $t('order_rentalDate') + ': ' }}</div>
                  <div class="value">{{ info.createTime | dateformat }}</div>
                </div>
                <div class="order_row">
                  <div class="key">{{ $t('order_merchant_name') + ': ' }}</div>
                  <div class="value">
                    {{ info.rentBranchName | stateFormats }}
                  </div>
                </div>
                <div class="order_row">
                  <div class="key">{{ $t('home_stationID') + ': ' }}</div>
                  <div class="value">
                    {{ info.rentCabinetNo | stateFormats }}
                  </div>
                </div>
              </div>
              <template v-if="info.processState != 2">
                <div class="item" v-if="[2, 3].includes(info.state) && info.returnCabinetNo">
                  <div class="order_row" v-if="info.endTime  && info.returnCabinetNo">
                    <div class="key">{{ $t('order_retrurnDate') + ': ' }}</div>
                    <div class="value">{{ info.endTime | dateformat }}</div>
                  </div>
                  <div class="order_row" v-if="info.returnBranchName">
                    <div class="key">
                      {{ $t('order_merchant_name') + ': ' }}
                    </div>
                    <div class="value">
                      {{ info.returnBranchName | stateFormats }}
                    </div>
                  </div>
                  <div class="order_row" v-if="info.returnCabinetNo">
                    <div class="key">{{ $t('home_stationID') + ': ' }}</div>
                    <div class="value">
                      {{ info.returnCabinetNo | stateFormats }}
                    </div>
                  </div>
                </div>
              </template>
              <div class="item">
                <div class="order_row">
                  <div class="key">{{ $t('order_pbID') + ': ' }}</div>
                  <div class="value">{{ info.pbNo }}</div>
                </div>
              </div>
            </div>
          </div>
          <!-- Billing rules  -->
          <div class="detail_card">
            <div class="title">{{ $t('order_pricePlan') }}</div>
            <div class="list_box billing">
              <div class="item">
                <div class="key">{{ $t('order_pricePlan') }}</div>
                <div class="value" v-if="info.billing.isSystem">
                  {{ $t('FREE_USAGE') }}
                </div>
                <div class="value" v-else>
                  <span v-if="info.billing.freeDuration">{{
                    $t('billingRules1')
                      .replace(
                        '$order',
                        info.billing.freeLimit > 0
                          ? $t(`First_order${info.billing.freeLimit}`)
                          : $t('Every_order')
                      )
                      .replace('$freeDuration', info.billing.freeDuration)
                      .replace(
                        '$times1',
                        info.billing.freeDurationControlType == 1
                          ? info.billing.freeDuration > 1
                            ? $t('minute3')
                            : $t('minute2')
                          : info.billing.freeDurationControlType == 2
                          ? info.billing.freeDuration > 1
                            ? $t('hour4')
                            : $t('hour3')
                          : info.billing.freeDuration > 1
                          ? $t('days')
                          : $t('day')
                      )
                  }}</span>
                  <span>{{
                    $t('billingRules2')
                      .replace(
                        '$thereafter',
                        info.billing.freeDuration ? $t('thereafter') : ''
                      )
                      .replace(/\s+$/, '')
                      .replace('$amount', formatMoney(info.billing.amount))
                      .replace('$cycle', info.billing.cycle)
                      .replace(
                        '$times2',
                        info.billing.controlType == 1
                          ? info.billing.cycle > 1
                            ? $t('minute3')
                            : $t('minute2')
                          : info.billing.controlType == 2
                          ? info.billing.cycle > 1
                            ? $t('hour4')
                            : $t('hour3')
                          : info.billing.cycle > 1
                          ? $t('days')
                          : $t('day')
                      )
                  }}{{
                    info.billing.dayAmount
                     ? $t('punctuation1')
                     : $t('punctuation2')
                  }}
                  </span>
                  <span v-if="info.billing.dayAmount">{{
                    $t('billingRules3').replace(
                      '$dayAmount',
                      formatMoney(info.billing.dayAmount)
                    )
                  }}</span>
                  <span v-if="info.billing.penaltyAmount">{{
                    $t('billingRules4')
                      .replace(
                        '$penaltyAmount',
                        formatMoney(info.billing.penaltyAmount)
                      )
                      .replace('$maxRentDuration', info.billing.maxRentDuration)
                      .replace(
                        '$times3',
                        info.billing.maxDurationControlType == 1
                          ? info.billing.maxRentDuration > 1
                            ? $t('minute3')
                            : $t('minute2')
                          : info.billing.maxDurationControlType == 2
                          ? info.billing.maxRentDuration > 1
                            ? $t('hour4')
                            : $t('hour3')
                          : info.billing.maxRentDuration > 1
                          ? $t('days')
                          : $t('day')
                      )
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <bottom-button
          :title="$t('home_gotoPay')"
          @click="toPay"
          v-if="[2].includes(info.state)"
        ></bottom-button>
      </template>
      <template v-else>
        <div class="page_body">
          <empty-data orderType></empty-data>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import $api from '@/assets/js/api/index'
import share from '@/mixins/share'
export default {
  mixins: [share],
  data () {
    return {
      orderStatusMap: {
        0: 'Order_status_init', //初始化
        1: 'home_renting', //租借中
        2: 'order_pendingPayment', //待支付
        3: 'points_completed', //已完成
        4: 'shop_cancelled', //已取消
        5: 'shop_underInvestigation', //调查中
        6: 'points_completed', //已退款 (这下面几个显示已完成)
        7: 'points_completed', //已报失
        8: 'points_completed' //已购买
      },
      info: null
    }
  },
  created () {
    this.getLang()
  },
  methods: {
    toPay () {
      let info = this.info
      let type = info.type
      if (info.state == 2) type = 1
      if ([7, 8].includes(info.state) || info.processState == 2) type = 7
      this.$router.push({
        path: '/pay/way',
        query: { type, orderNo: info.orderNo }
      })
    }
  },
  mounted () {
    let orderNo = this.$route.query.orderNo
    $api.order.getDetails({ orderNo }).then(res => {
      if (res.code != '0') {
        this.global.toast(res.message)
        return
      }
      this.info = res.data
    })
  },
  computed: {}
}
</script>
<style scoped lang="scss">
[v-cloak] {
  opacity: 0;
}
.container {
  background-color: var(--page-bg);
}
.container_page {
  --page-header-height: 44px;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background-color: var(--page-bg);
}
.page_body {
  height: calc(100vh - var(--page-header-height));
  box-sizing: border-box;
  padding-bottom: 100px;
  background-color: var(--page-bg);
  overflow: auto;
}
.pay_type {
  padding: var(--gap);
  padding-bottom: 20px;
  .brief {
    font-size: 12px;
    font-weight: 500;
    color: #66666b;
    margin-left: 12px;
    margin-bottom: 8px;
  }
  .brief:nth-last-child(1) {
    margin-bottom: 0;
  }
}
.detail_card {
  padding: var(--gap);
  padding-bottom: 0px;
  .title {
    height: 20px;
    font-size: 17px;
    font-weight: 600;
    color: #39404d;
    margin-left: 10px;
    margin-bottom: 10px;
  }
  .list_box {
    background-color: var(--card-bg);
    padding-left: 20px;
    border-radius: 10px;
  }
  .info_list {
    .value {
      white-space: nowrap !important;
    }
  }
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-top: 1px #e4e4e6 solid;

    &:first-child {
      border: none;
    }
    .key {
      font-size: 13px;
      font-weight: 500;
      text-align: left;
      color: #66666b;
      display: flex;
      align-items: center;
      .label {
        transform: translateY(1px);
      }
      img {
        width: 14px;
        height: 14px;
        margin-right: 6px;
      }
    }
    .value {
      font-size: 14px;
      color: #39404d;
      font-weight: 600;
      padding-right: 20px;
      &.payment {
        font-size: 20px;
        font-weight: Bold;
      }
    }
  }
  .order {
    padding: 0;
    .item {
      display: block;
    }
    .key,
    .value {
      display: inline;
    }
    .value {
      font-weight: 500;
    }
    .order_row {
      padding: 0 20px;
      margin-bottom: 10px;
      &:nth-last-child(1) {
        margin-bottom: 0;
      }
    }
  }
  .billing .item {
    flex-direction: column;
    align-items: flex-start;
    .key {
      font-size: 15px;
      font-weight: 600;
      color: #39404d;
      margin-bottom: 4px;
    }
    .value {
      font-size: 13px;
      font-weight: 400;
      color: #66666b;
    }
  }
}

.divider {
  height: 1px;
  background: #d2d8e2;
}
.order_status {
  font-size: 20px;
  font-weight: 700;
  color: #39404d;
  display: flex;
  align-items: center;
  .dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;
    margin-right: 6px;
  }
  margin-bottom: 8px;
}
.home_renting {
  background-color: #1295FF;
}
.order_pendingPayment {
  background-color: #ffc855;
}
.shop_underInvestigation {
  background-color: #ffc855;
}
.points_completed {
  background-color: #4ce48a;
}
</style>
